<template>
    <div id="app">
        <Head>服务项目</Head>
        <van-field
              v-model="sub.name"
              label="项目名称"
              placeholder="请填写名称"
              class="reset_after"
            />
        <van-field
              v-model="sub.money"
              label="项目价格"
              placeholder="请填写价格"
              class="reset_after"
              type="number"
            />
        <div class="btn" @click="save">保&nbsp;&nbsp;存</div>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
  },
  data () {
    return {
      sub: {
        id: '',
        name: '',
        money: ''
      }
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.id = this.$route.query.id
    }
    // 请求数据
    this.fetchData()
  },
  methods: {
    fetchData () {
      http.get(api.get_item, {id: this.sub.id, type: 3})
        .then(res => {
          this.sub.name = res.data.title
          this.sub.money = res.data.price
        }).catch(() => {})
    },
    save () {
      if (!this.sub.name) {
        this.$notify('请填写名称')
        return false
      }
      if (!this.sub.money) {
        this.$notify('请填写价格')
        return false
      }
      http
        .post(api.save_service, {
          id: this.sub.id,
          title: this.sub.name,
          price: this.sub.money
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.$router.push({ path: '/freelance/service' })
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
    margin-top: 66px;
    margin-left: 21px;
    width: calc(100vw - 42px);
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #464646;
    border-radius: 50px;
    background-color: #fed700;
    box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
}
</style>
